<template>
  <div class="box">
    <div class="top">

      <router-link to="/start"> <img @click="login" src="../../../../public/images/0DB97813F732C006D13A7EDBDE601189.png" alt="" /></router-link>
      <!-- <span class="span1" v-if="pd">点击登录</span>
      <span class="span1" v-else>欢迎您!:{{ info.data.info.fullname }}</span>
      <span class="span2" v-if="pd">登录后可体验更多功能</span> -->
      <div id="btn">
        <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect" placement="bottom-end">
          <template #reference>
            <van-button type="primary">设置</van-button>
          </template>
        </van-popover>

      </div>
    </div>
    <van-swipe-cell>
      <van-cell :border="false" title="我的预约记录" icon="clock-o" @click="getAppointment(id)" />
    </van-swipe-cell>
    <van-overlay :show="show">
      <div class="wrapper" @click="show = false ">
        <div class="block">

          <van-divider :style="{ color: 'red', borderColor: 'red', padding: '0 16px' }">
            预约记录
          </van-divider>
          <ul class="h-ul">
            <li>
              <van-tag plain type="success" class="van-tag1">预约单号</van-tag>
              <span class="span span1">{{appointmentinfo._id}}</span>
            </li>
            <li>
              <van-tag plain type="success" class="van-tag2">预约时间</van-tag>
              <span class="span span2">{{appointmentinfo.time}}</span>
            </li>
            <li>
              <van-tag plain type="success" class="van-tag3">预约id</van-tag>
              <span class="span span3">{{appointmentinfo.id}}</span>
            </li>
            <li>
              <van-tag plain type="success" class="van-tag4">预约人</van-tag>
              <span class="span span4">{{appointmentinfo.nickname}}</span>
            </li>
          </ul>


        </div>
      </div>
    </van-overlay>

    <van-swipe-cell>
      <van-cell :border="false" title="我的通知" icon="chat-o" />
    </van-swipe-cell>

    <van-collapse v-model="activeNames">
      <van-collapse-item name="1">
        <template #title>
          <div>
            <van-icon name="gold-coin-o" />我的钱包
          </div>
        </template>
        代码是写出来给人看的，附带能在机器上运行。
      </van-collapse-item>
      <van-collapse-item class="collapse2" title="我的评分" name="2" icon="like">
        <van-rate v-model="value" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
      </van-collapse-item>
      <van-contact-card type="add" @click="onAdd" />

    </van-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Toast } from "vant";
import { Dialog } from 'vant';
import axios from "axios";

const showPopover = ref(false);
const activeNames = ref(['0']);
let id = ref()
const login = () => { }
// 通过 actions 属性来定义菜单选项
const actions = [{ text: "修改昵称" }, { text: "修改密码" }];
const VanDialog = Dialog.Component;

const onSelect = () => Dialog.confirm({
  title: '修改昵称',
  message: '',
  width: '100%',
  theme: 'round-button',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  })
// Toast(action.text);

const show = ref(false);
const value = ref(2.5);
const onAdd = () => Toast('新增');

// 获取登录数据
// let info = JSON.parse(sessionStorage.getItem('user_data'))

// 头像判断
// const headerImg = () => {
//   if (!info === null) {
//     return info.headerimg
//   }
//   return '未登录'
// }

// 登录信息判断

// let pd = ref(true)
// let userInfo = ref()

// if (info == null) {
//   console.log('-1');
// } else {
//   userInfo = info.data.info
//   id.value = userInfo._id
//   console.log(userInfo);
  
//   pd.value = false
//   console.log('1');
// }

const appointmentinfo = ref()

// 获取预约记录
const  getAppointment = (id:string) => {
  axios.get(`/api/users/getAppointment?id=${id}`).then(res => {
    appointmentinfo.value = res.data.info
    show.value = true
  })
}

</script>

<style scoped lang="scss">

.block li .span[data-v-e764ef29] {
    line-height: 1.33333rem;
    position: absolute;
    right: 1.06667rem;
    font-size: 17px;
}
.box {
  background: url('../../public/images/login.png') no-repeat;
  background-size: cover;
  position: relative;
  height: 666px;

  .top {
    height: 200px;
    //background: rgb(195, 209, 227);
    position: relative;

    img {
      width: 95px;
      height: 95px;
      border-radius: 50%;

      margin-top: 25%;
      margin-left: 20px;
      background: url('../../public/image/0DB97813F732C006D13A7EDBDE601189.png');
      background-size: cover;
    }

    .span1 {
      position: absolute;
      top: 55%;
      left: 35%;
    }

    .span2 {
      position: absolute;
      top: 74%;
      left: 35%;
      font-size: 16px;
      font-weight: 400;
    }

    .span3{
      font-size: 26px;
    }

    #btn {
      position: absolute;
      top: 0;
      right: 0px;
      background: rgb(195, 209, 227, 0.5);
    }
  }

  // .van-rate{
  //   position: absolute;
  //   bottom: 10%;
  // }
  // .van-collapse-item__title{
  //   color: red($color: #ff0303);
  // }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 100%;
  //  height:100%;
  background-color: #fff;

  .divider {
    font-size: 20px;
  }

  li {
    padding-left: 20px;
    height: 50px;
    border-bottom: 1px dotted black;
    position: relative;

    .van-tag1,
    .van-tag2 ,

    .van-tag3,
    .van-tag4 {
      margin-top: 10px;
      width: 80px;
      height: 30px;
      font-size: 20px;
    }

    .span {
      line-height: 50px;
      position: absolute;
      right: 40px;
    }
  }
}
</style>